<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七种武器</title>
    <!-- <link rel="stylesheet" href="{{ url_for('static', filename='css/loading-effects.css') }}"> -->
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }

        .search-container {
            display: flex;
            text-align: center;
            margin: 20px auto 30px;
            max-width: 500px;
        }
        .search-input {
            padding: 10px 15px;
            width: 70%;
            border: 2px solid #ddd;
            border-radius: 5px 0 0 5px;
            font-size: 16px;
            outline: none;
        }
        .search-input::placeholder {
            color: #bbb;  /* 设置 placeholder 的字体颜色 */
        }
        .search-button {
            padding: 10px 15px;
            background-color: #7F6749;
            border: 2px solid #ddd;
            border-radius: 0 5px 5px 0;
            font-size: 16px;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .search-button:hover {
            background-color: #ccc;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            border-radius: 10px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        }
        .weapons-container {
            display: grid;
            width: 100%;
            grid-template-columns: repeat(1, 100%);
            gap: 5px;
            margin: 1rem 0 2rem;
            min-height: 800px;
        }
        @media screen and (min-width: 40em) {
            .weapons-container {
                grid-template-columns: repeat(2, 50%);
            }
        }
        @media screen and (min-width: 80em) {
            .weapons-container {
                grid-template-columns: repeat(3, calc(100% / 3));
            }
        }
        .weapon {
            background-color: #ddd;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 10px;
            transition: transform 0.3s ease;
            aspect-ratio: 300/475;
            width: 100%;
        }
        .weapon:hover {
            transform: scale(1.05);     /* 放大效果 */
            opacity: 0.8;              /* 轻微透明效果 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);  /* 添加阴影 */
        }
        svg {
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/config.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/loading.css') }}">
</head>
<body>
    <h1>七种武器</h1>

    <!-- 搜索框 -->
    <div class="search-container">
        <input type="text" class="search-input" placeholder="用七把武器打破思维之壁...">
        <button class="search-button">开始</button>
        <button class="search-button" id="settings-button">API-KEY</button>
    </div>
    
    <!-- 设置弹窗 config-popup.css -->   
    <div id="settings-modal" class="modal">
        <div class="modal-content">
            <h2>设置</h2>
            <div class="form-group">
                <label for="api-key">API Key</label>
                <input type="text" id="api-key" name="api-key" placeholder="输入您的 API Key">
            </div>
            
            <!-- 模型选择下拉框 -->
            <div class="form-group">
                <label for="model">模型</label>
                <!-- 修改为输入框 -->
                <input type="text" id="model" name="model" value="claude-3-7-sonnet-20250219" placeholder="请输入模型名称">
            </div>

            <!-- API_ENDPOINT 输入框 -->
            <div class="form-group">
                <label for="api-endpoint">API Endpoint</label>
                <input type="text" id="api-endpoint" name="api-endpoint" placeholder="输入 API Endpoint" value="https://api.anthropic.com/v1/messages">
            </div>
            
            <!-- 最大并发数输入框 -->
            <div class="form-group">
                <label for="max-concurrent">最大并发数</label>
                <input type="number" id="max-concurrent" name="max-concurrent" min="1" max="10" value="3">
            </div>
            
             <!-- 三个按钮-->
            <div class="button-group">
                <button id="test-connection"><span id="spinner-id" class="spinner"></span> 测试连接</button>
                <button id="save-settings">保存</button>
                <button id="cancel-settings">取消</button>
            </div>

             <!-- 错误信息输出区域 -->
            <div class="form-group">
                <span id="test-connection-result" class="result-message"></span>
            </div>
        </div>
    </div>

    <!-- 七武器区域 -->
    <section class="weapons-container">
    
        <!-- <div class="weapon">
            <div id="hammer_begin"> svg_logo  </div>
            <div id="hammer_loading">  loading </div>
            <div id="hammer_result"> result  </div>
        </div> -->

        <!-- 武器3：定义之矛 -->
        <div class="weapon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 475">
                <title>定义之矛</title>
                <rect width="300" height="475" fill="#f0f0f0"/>
                
                <!-- 标题 -->
                <text x="150" y="40" text-anchor="middle" font-size="24" fill="#333">定义之矛</text>
                
                <!-- 所有元素整体缩小到80%并居中 -->
                <g transform="translate(150,237.5) scale(0.8) translate(-150,-237.5)">
                    <!-- 矛杆 -->
                    <line x1="150" y1="150" x2="150" y2="420" stroke="#654321" stroke-width="12"/>
                    
                    <!-- 矛杆装饰 -->
                    <rect x="144" y="240" width="12" height="60" fill="#543" rx="2"/>
                    <rect x="144" y="320" width="12" height="30" fill="#543" rx="2"/>
                    
                    <!-- 传统矛尖 -->
                    <path d="M150,150 L130,110 L150,60 L170,110 Z" fill="#777" stroke="#555" stroke-width="2"/>
                    <line x1="150" y1="60" x2="150" y2="150" stroke="#555" stroke-width="1"/>
                    
                    <!-- 矛尖侧翼 -->
                    <path d="M130,110 L120,105 L125,120 Z" fill="#666" stroke="#555" stroke-width="1"/>
                    <path d="M170,110 L180,105 L175,120 Z" fill="#666" stroke="#555" stroke-width="1"/>
                    
                    <!-- 定义标记 - 卷轴/书页 -->
                    <rect x="140" y="155" width="20" height="60" fill="#eee" rx="2" stroke="#555" stroke-width="1"/>
                    
                    <!-- 定义符号线条 -->
                    <line x1="145" y1="170" x2="155" y2="170" stroke="#333" stroke-width="1.5"/>
                    <line x1="145" y1="175" x2="152" y2="175" stroke="#333" stroke-width="1.5"/>
                    <line x1="145" y1="180" x2="155" y2="180" stroke="#333" stroke-width="1.5"/>
                    <line x1="145" y1="185" x2="153" y2="185" stroke="#333" stroke-width="1.5"/>
                    <line x1="145" y1="190" x2="150" y2="190" stroke="#333" stroke-width="1.5"/>
                    
                    <!-- 定义标记装饰 -->
                    <text x="145" y="165" font-family="monospace" font-weight="bold" font-size="8" fill="#555">D:</text>
                    
                    <!-- 矛底装饰 -->
                    <path d="M144,420 L156,420 L156,435 L150,445 L144,435 Z" fill="#543"/>
                </g>
                
                <!-- 说明文字 - 这个保持在原位置 -->
                <text x="150" y="450" text-anchor="middle" font-size="16" fill="#333">「  明晰概念，精准思考 」</text>
            </svg>
        </div>
        
        <!-- 武器2：类比之弓 -->
        <div class="weapon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 475">
                <title>类比之弓</title>
                <rect width="300" height="475" fill="#f0f0f0"/>
                
                <!-- 标题 -->
                <text x="150" y="40" text-anchor="middle" font-size="24" fill="#333">类比之弓</text>
                
                <!-- 弓身 -->
                <path d="M90,120 C30,240 30,350 90,380" stroke="#654321" stroke-width="14" fill="none"/>
                
                <!-- 弓弦 -->
                <path d="M90,120 C130,240 130,260 90,380" stroke="#aaa" stroke-width="3" fill="none"/>
                
                <!-- 弓弦绑带装饰 -->
                <line x1="85" y1="130" x2="95" y2="130" stroke="#543" stroke-width="6"/>
                <line x1="85" y1="370" x2="95" y2="370" stroke="#543" stroke-width="6"/>
                
                <!-- 握把装饰 -->
                <rect x="75" y="230" width="30" height="40" rx="5" fill="#543" opacity="0.7"/>
                
                <!-- 箭 -->
                <line x1="130" y1="250" x2="240" y2="250" stroke="#555" stroke-width="4"/>

                <!-- 改进的箭尾 - 更简洁优雅 -->
                <rect x="115" y="242" width="20" height="16" rx="2" fill="#777"/>
                <line x1="125" y1="242" x2="125" y2="258" stroke="#333" stroke-width="1"/>
                <line x1="120" y1="242" x2="120" y2="258" stroke="#333" stroke-width="1"/>
                <line x1="130" y1="242" x2="130" y2="258" stroke="#333" stroke-width="1"/>
                
                <!-- 箭头 -->
                <path d="M240,250 L260,240 L260,260 Z" fill="#555"/>
                
                <!-- 类比概念可视化 - 箭上的标记 -->
                <circle cx="160" cy="250" r="8" fill="#eec" stroke="#555" stroke-width="1"/>
                <circle cx="200" cy="250" r="8" fill="#cde" stroke="#555" stroke-width="1"/>
                
                <!-- 弓身装饰 - 类比符号 -->
                <text x="55" y="230" text-anchor="middle" font-size="18" font-weight="bold" fill="#543">≈</text>
                <text x="55" y="270" text-anchor="middle" font-size="18" font-weight="bold" fill="#543">≈</text>
                
                <!-- 说明文字 -->
                <text x="150" y="450" text-anchor="middle" font-size="16" fill="#333">「 简而言之，这就像是 」</text>
            </svg>
        </div>

        <!-- 武器1：问题之锤 -->
        <div class="weapon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 475">
                <title>问题之锤</title>
                <rect width="300" height="475" fill="#f0f0f0"/>
                
                <!-- 标题 -->
                <text x="150" y="40" text-anchor="middle" font-size="24" fill="#333">问题之锤</text>
                
                <!-- 所有元素整体缩小到80%并居中 -->
                <g transform="translate(150,237.5) scale(0.8) translate(-150,-237.5)">
                    <!-- 锤柄 -->
                    <line x1="150" y1="190" x2="150" y2="400" stroke="#654321" stroke-width="16"/>
                    <path d="M140,400 C140,410 140,420 150,430 C160,420 160,410 160,400 Z" fill="#654321"/>
                    
                    <!-- 锤头 -->
                    <rect x="80" y="90" width="140" height="100" rx="5" fill="#777"/>
                    <rect x="70" y="110" width="160" height="60" rx="5" fill="#555"/>
                    
                    <!-- 锤头纹理 -->
                    <line x1="90" y1="110" x2="90" y2="170" stroke="#666" stroke-width="1"/>
                    <line x1="110" y1="110" x2="110" y2="170" stroke="#666" stroke-width="1"/>
                    <line x1="130" y1="110" x2="130" y2="170" stroke="#666" stroke-width="1"/>
                    <line x1="150" y1="110" x2="150" y2="170" stroke="#666" stroke-width="1"/>
                    <line x1="170" y1="110" x2="170" y2="170" stroke="#666" stroke-width="1"/>
                    <line x1="190" y1="110" x2="190" y2="170" stroke="#666" stroke-width="1"/>
                    <line x1="210" y1="110" x2="210" y2="170" stroke="#666" stroke-width="1"/>
                    
                    <!-- 问号装饰 - 大问号 -->
                    <path d="M130,125 Q150,105 170,125 Q190,145 170,165 L150,165" stroke="#f0f0f0" stroke-width="8" fill="none"/>
                    <circle cx="150" cy="185" r="6" fill="#f0f0f0"/>
                    
                    <!-- 装饰元素 - 小问号 -->
                    <path d="M105,95 Q115,85 125,95 Q135,105 125,115 L115,115" stroke="#ddd" stroke-width="4" fill="none"/>
                    <circle cx="115" cy="125" r="3" fill="#ddd"/>
                    
                    <path d="M175,95 Q185,85 195,95 Q205,105 195,115 L185,115" stroke="#ddd" stroke-width="4" fill="none"/>
                    <circle cx="185" cy="125" r="3" fill="#ddd"/>
                    
                    <!-- 锤底部装饰 -->
                    <circle cx="150" cy="420" r="15" fill="#555"/>
                    <circle cx="150" cy="420" r="8" fill="#654321"/>
                </g>
                
                <!-- 说明文字 - 这个保持在原位置 -->
                <text x="150" y="450" text-anchor="middle" font-size="16" fill="#333">「 砸碎表象，直面问题 」</text>
            </svg>
        </div>

        <!-- 武器4：抽象之梯 -->
        <div class="weapon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 475">
                <title>抽象之梯</title>
                <rect width="300" height="475" fill="#f0f0f0"/>
                
                <!-- 标题 -->
                <text x="150" y="40" text-anchor="middle" font-size="24" fill="#333">抽象之梯</text>
                
                <!-- 所有元素整体缩小到80%并居中 -->
                <g transform="translate(150,237.5) scale(0.8) translate(-150,-237.5)">
                    <!-- 主梯体 - 右侧梯子 -->
                    <line x1="180" y1="90" x2="180" y2="400" stroke="#654321" stroke-width="8"/>
                    <line x1="220" y1="90" x2="220" y2="400" stroke="#654321" stroke-width="8"/>
                    
                    <!-- 梯子横档 -->
                    <line x1="180" y1="130" x2="220" y2="130" stroke="#654321" stroke-width="6"/>
                    <line x1="180" y1="170" x2="220" y2="170" stroke="#654321" stroke-width="6"/>
                    <line x1="180" y1="210" x2="220" y2="210" stroke="#654321" stroke-width="6"/>
                    <line x1="180" y1="250" x2="220" y2="250" stroke="#654321" stroke-width="6"/>
                    <line x1="180" y1="290" x2="220" y2="290" stroke="#654321" stroke-width="6"/>
                    <line x1="180" y1="330" x2="220" y2="330" stroke="#654321" stroke-width="6"/>
                    <line x1="180" y1="370" x2="220" y2="370" stroke="#654321" stroke-width="6"/>
                    
                    <!-- 左侧抽象梯子 - 表示层次上升 -->
                    <line x1="80" y1="370" x2="80" y2="90" stroke="#777" stroke-width="4" stroke-dasharray="2,3"/>
                    <line x1="120" y1="370" x2="120" y2="90" stroke="#777" stroke-width="4" stroke-dasharray="2,3"/>
                    
                    <!-- 抽象横档 - 逐渐变细表示抽象程度增加 -->
                    <line x1="80" y1="370" x2="120" y2="370" stroke="#777" stroke-width="6"/>
                    <line x1="80" y1="330" x2="120" y2="330" stroke="#777" stroke-width="5"/>
                    <line x1="80" y1="290" x2="120" y2="290" stroke="#777" stroke-width="4"/>
                    <line x1="80" y1="250" x2="120" y2="250" stroke="#777" stroke-width="3"/>
                    <line x1="80" y1="210" x2="120" y2="210" stroke="#777" stroke-width="2"/>
                    <line x1="80" y1="170" x2="120" y2="170" stroke="#666" stroke-width="1.5"/>
                    <line x1="80" y1="130" x2="120" y2="130" stroke="#555" stroke-width="1"/>
                    
                    <!-- 连接两个梯子的横线 - 表示抽象层级 -->
                    <line x1="120" y1="370" x2="180" y2="370" stroke="#666" stroke-width="3" stroke-dasharray="5,3"/>
                    <line x1="120" y1="290" x2="180" y2="290" stroke="#666" stroke-width="3" stroke-dasharray="5,3"/>
                    <line x1="120" y1="210" x2="180" y2="210" stroke="#666" stroke-width="3" stroke-dasharray="5,3"/>
                    <line x1="120" y1="130" x2="180" y2="130" stroke="#666" stroke-width="3" stroke-dasharray="5,3"/>
                    
                    <!-- 顶部抽象符号 -->
                    <circle cx="80" cy="90" r="10" fill="none" stroke="#555" stroke-width="2"/>
                    <circle cx="120" cy="90" r="10" fill="none" stroke="#555" stroke-width="2"/>
                    <circle cx="180" cy="90" r="10" fill="#555"/>
                    <circle cx="220" cy="90" r="10" fill="#555"/>
                    
                    <!-- 概念连接线 - 顶部 -->
                    <line x1="120" y1="90" x2="180" y2="90" stroke="#555" stroke-width="2" stroke-dasharray="3,2"/>
                    
                    <!-- 底部装饰 -->
                    <rect x="75" y="400" width="150" height="10" rx="3" fill="#654321"/>
                </g>
                
                <!-- 说明文字 -->
                <text x="150" y="450" text-anchor="middle" font-size="16" fill="#333">「 层层攀登，概念提炼 」</text>
            </svg>
        </div>
        
        <!-- 武器5：质疑之锥 -->
        <div class="weapon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 475">
                <title>质疑之锥</title>
                <rect width="300" height="475" fill="#f0f0f0"/>
                
                <!-- 标题 -->
                <text x="150" y="40" text-anchor="middle" font-size="24" fill="#333">质疑之锥</text>
                
                <!-- 所有元素整体缩小到80%并居中 -->
                <g transform="translate(150,240) scale(0.8) translate(-150,-240)">
                    <!-- 锥子整体旋转，更加动态，在画布中央 -->
                    <g transform="translate(150,240) rotate(-60)">
                        <!-- 更短的手柄 -->
                        <rect x="-40" y="-8" width="40" height="16" rx="2" fill="#654321"/>
                        <rect x="-50" y="-12" width="15" height="24" rx="2" fill="#543"/>
                        
                        <!-- 金属连接部分 -->
                        <rect x="-5" y="-10" width="15" height="20" rx="1" fill="#888"/>
                        
                        <!-- 更长更锐利的锥体 -->
                        <path d="M10,0 L180,-15 L190,0 L180,15 Z" fill="#aaa" stroke="#666" stroke-width="1"/>
                        
                        <!-- 极尖锐的锥尖 -->
                        <path d="M180,-15 L200,0 L180,15" fill="#999" stroke="#777" stroke-width="1"/>
                        <path d="M200,0 L210,0" stroke="#777" stroke-width="1" stroke-linecap="round"/>
                        
                        <!-- 锥体纹理线 - 更加简洁 -->
                        <line x1="30" y1="0" x2="180" y2="0" stroke="#777" stroke-width="0.8"/>
                        <line x1="50" y1="-6" x2="170" y2="-6" stroke="#777" stroke-width="0.5"/>
                        <line x1="50" y1="6" x2="170" y2="6" stroke="#777" stroke-width="0.5"/>
                    </g>
                    
                    <!-- 被刺破的概念泡泡 - 更加突出，调整位置使整体居中 -->
                    <circle cx="230" cy="170" r="45" fill="none" stroke="#aaa" stroke-width="2" stroke-dasharray="4,3"/>
                    <text x="230" y="190" text-anchor="middle" font-size="12" fill="#999">假象</text>
                    
                    <circle cx="120" cy="240" r="35" fill="none" stroke="#aaa" stroke-width="2" stroke-dasharray="4,3"/>
                    <text x="120" y="230" text-anchor="middle" font-size="12" fill="#999">求真</text>
                    
                    <circle cx="90" cy="150" r="30" fill="none" stroke="#aaa" stroke-width="2" stroke-dasharray="4,3"/>
                    <text x="103" y="155" text-anchor="middle" font-size="12" fill="#999">迷思</text>
                    
                    <!-- 移除了问号符号 -->
                    
                    <!-- 破裂效果 - 更加明显 -->
                    <path d="M230,170 L260,190 M230,170 L270,160 M230,170 L255,140" stroke="#999" stroke-width="1.5"/>
                    <path d="M120,240 L140,270 M120,240 L100,270 M120,240 L90,230" stroke="#999" stroke-width="1.5"/>
                    <path d="M90,150 L70,130 M90,150 L60,155 M90,150 L75,175" stroke="#999" stroke-width="1.5"/>
                </g>
                
                <!-- 说明文字 -->
                <text x="150" y="450" text-anchor="middle" font-size="16" fill="#333">「 刺破假象，直指本质 」</text>
            </svg>
        </div>
        
        <!-- 武器6：逻辑之刃 -->
        <div class="weapon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 475">
                <title>逻辑之刃</title>
                <rect width="300" height="475" fill="#f0f0f0"/>
                
                <!-- 标题 -->
                <text x="150" y="40" text-anchor="middle" font-size="24" fill="#333">逻辑之刃</text>
                
                <!-- 所有元素整体缩小到80%并居中 -->
                <g transform="translate(150,237.5) scale(0.8) translate(-150,-237.5)">
                    <!-- 剑柄 -->
                    <rect x="140" y="320" width="20" height="80" rx="2" fill="#654321"/>
                    
                    <!-- 护手 - 推理符号形状 -->
                    <path d="M110,320 L190,320 L180,300 L120,300 Z" fill="#777" stroke="#555" stroke-width="1"/>
                    
                    <!-- 剑身 - 直线代表逻辑的清晰性 -->
                    <path d="M150,300 L150,100" stroke="#aaa" stroke-width="10" stroke-linecap="round"/>
                    <path d="M150,300 L150,100" stroke="#eee" stroke-width="1" stroke-linecap="round"/>
                    
                    <!-- 逻辑符号装饰 -->
                    <!-- 如果...那么(→) -->
                    <path d="M135,270 L165,270 L155,260" stroke="#333" stroke-width="2" fill="none"/>
                    
                    <!-- 且(∧) -->
                    <path d="M135,240 L150,225 L165,240" stroke="#333" stroke-width="2" fill="none"/>
                    
                    <!-- 或(∨) -->
                    <path d="M135,210 L150,225 L165,210" stroke="#333" stroke-width="2" fill="none"/>
                    
                    <!-- 全称量词(∀) -->
                    <path d="M135,190 L150,170 L165,190 M145,180 L155,180" stroke="#333" stroke-width="2" fill="none"/>
                    
                    <!-- 存在量词(∃) -->
                    <path d="M140,150 L160,150 M140,140 L160,140 M140,160 L160,160" stroke="#333" stroke-width="2" fill="none"/>
                    
                    <!-- 剑尖 - 真理符号 -->
                    <path d="M135,100 L150,80 L165,100 Z" fill="#ddd" stroke="#555" stroke-width="1.5"/>
                    <text x="150" y="95" text-anchor="middle" font-size="16" fill="#555">T</text>
                    
                    <!-- 剑身反光 -->
                    <line x1="147" y1="290" x2="147" y2="110" stroke="#fff" stroke-width="0.8"/>
                    
                    <!-- 剑刃边缘 -->
                    <path d="M145,300 L145,100" stroke="#888" stroke-width="1" stroke-linecap="round"/>
                    <path d="M155,300 L155,100" stroke="#888" stroke-width="1" stroke-linecap="round"/>
                    
                    <!-- 剑柄装饰 -->
                    <rect x="138" y="340" width="24" height="10" rx="1" fill="#543"/>
                    <rect x="138" y="370" width="24" height="10" rx="1" fill="#543"/>
                    
                    <!-- 剑尾 -->
                    <circle cx="150" cy="405" r="15" fill="#777" stroke="#555" stroke-width="1"/>
                    <path d="M140,400 L160,400 M145,395 L155,395 M145,405 L155,405" stroke="#333" stroke-width="1.5" fill="none"/>
                </g>
                
                <!-- 说明文字 -->
                <text x="150" y="450" text-anchor="middle" font-size="16" fill="#333">「 锐利推理，切中命题 」</text>
            </svg>
        </div>
        
        <!-- 武器7：视角之镜 -->
        <div class="weapon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 475">
                <title>视角之镜</title>
                <rect width="300" height="475" fill="#f0f0f0"/>
                
                <!-- 标题 -->
                <text x="150" y="40" text-anchor="middle" font-size="24" fill="#333">视角之镜</text>
                
                <!-- 所有元素整体缩小到80%并居中 -->
                <g transform="translate(150,240) scale(0.8) translate(-150,-240)">
                    <!-- 镜子主体 - 手持大型放大镜 -->
                    <!-- 镜柄 -->
                    <rect x="145" y="240" width="10" height="160" rx="2" fill="#654321"/>
                    <path d="M140,400 L160,400 L155,420 L145,420 Z" fill="#543"/>
                    
                    <!-- 镜框 -->
                    <circle cx="150" cy="170" r="80" fill="none" stroke="#777" stroke-width="12"/>
                    <circle cx="150" cy="170" r="74" fill="#e6f7ff" stroke="#aaa" stroke-width="1" opacity="0.7"/>
                    
                    <!-- 镜面反光效果 -->
                    <ellipse cx="130" cy="150" rx="60" ry="55" fill="none" stroke="#fff" stroke-width="2" opacity="0.5"/>
                    <ellipse cx="120" cy="140" rx="15" ry="10" fill="#fff" opacity="0.7"/>
                    
                    <!-- 镜框装饰 -->
                    <circle cx="150" cy="90" r="8" fill="#777"/>
                    <circle cx="150" cy="250" r="8" fill="#777"/>
                    <circle cx="90" cy="170" r="8" fill="#777"/>
                    <circle cx="210" cy="170" r="8" fill="#777"/>
                    
                    <!-- 不同视角元素 - 通过镜子看到的不同角度 -->
                    <!-- 视角1：正视图 -->
                    <rect x="140" y="160" width="20" height="20" stroke="#333" stroke-width="1" fill="none" opacity="0.8"/>
                    
                    <!-- 视角2：侧视图 -->
                    <path d="M145,165 L135,170 L145,175" stroke="#333" stroke-width="1" fill="none" opacity="0.8"/>
                    
                    <!-- 视角3：俯视图 -->
                    <ellipse cx="165" cy="170" rx="10" ry="5" stroke="#333" stroke-width="1" fill="none" opacity="0.8"/>
                    
                    <!-- 视角4：仰视图 -->
                    <path d="M170,160 L180,155 L190,160 L180,165 Z" stroke="#333" stroke-width="1" fill="none" opacity="0.8"/>
                    
                    <!-- 视角变换箭头 -->
                    <path d="M120,140 C140,130 160,130 180,140" stroke="#555" stroke-width="1.5" fill="none" opacity="0.6" stroke-dasharray="3,2"/>
                    <path d="M180,140 L185,135 M180,140 L175,135" stroke="#555" stroke-width="1" opacity="0.6"/>
                    
                    <path d="M120,200 C140,210 160,210 180,200" stroke="#555" stroke-width="1.5" fill="none" opacity="0.6" stroke-dasharray="3,2"/>
                    <path d="M120,200 L115,195 M120,200 L125,195" stroke="#555" stroke-width="1" opacity="0.6"/>
                    
                    <!-- 视角转换符号 -->
                    <g transform="translate(150,170)">
                        <path d="M-20,0 A20,20 0 1 1 20,0 A20,20 0 1 1 -20,0" stroke="#555" stroke-width="1.5" fill="none" opacity="0.7"/>
                        <path d="M-5,-5 L5,5 M-5,5 L5,-5" stroke="#555" stroke-width="1.5" opacity="0.7"/>
                    </g>
                </g>
                
                <!-- 说明文字 -->
                <text x="150" y="450" text-anchor="middle" font-size="16" fill="#333">「 转换视角，重见真相 」</text>
            </svg>
        </div>
    </section>

    <!-- 按钮逻辑 -->
    <script src="/static/js/weapon-loading.js"></script>
    <script src="{{ url_for('static', filename='js/config.js') }}"></script>
    <script src="{{ url_for('static', filename='js/svg-post-parse.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchButton = document.querySelector('.search-button');
            const searchInput = document.querySelector('.search-input');
            const weaponSvgs = document.querySelectorAll('.weapon svg');
            
            // 读取设置
            loadSettings();

            // 显示结果
            function showResult(svg, data) {
                svg.innerHTML = `
                    ${data.result}
                `;
                // SVG自动化布局：加载完成后调整文字大小
                // const maxWidth = svg.getBoundingClientRect().width;
                // const maxHeight = svg.getBoundingClientRect().height;
                // wrapTextInSvg(svg, maxWidth, maxHeight);
                // 打印加工后的SVG
                console.log(svg.outerHTML);
            }
            
            // 显示错误
            function showError(svg, message) {
                svg.innerHTML = `
                    <rect width="300" height="475" fill="#f0f0f0"/>
                    <text x="150" y="150" text-anchor="middle" font-size="16" fill="#cc0000">发生错误</text>
                    <text x="150" y="180" text-anchor="middle" font-size="14" fill="#333">${message}</text>
                `;
            }
            
            // 按钮点击事件
            searchButton.addEventListener('click', async function() {
                // 获取配置
                const apiKey = localStorage.getItem('apiKey');
                const model = localStorage.getItem('model');
                const maxConcurrent = parseInt(localStorage.getItem('maxConcurrent')) || 3;
                const apiEndpoint = localStorage.getItem('apiEndpoint') || 'https://api.anthropic.com/v1/messages';

                if (!apiKey) {
                    alert('请先配置 API Key');
                    settingsModal.style.display = 'block';
                    return;
                }

                const userInput = searchInput.value.trim();
                if (!userInput) {
                    alert('请输入内容');
                    return;
                }
                
                // 定义API请求
                const apiEndpoints = [
                    '/api/generate_spear',    // 定义之矛
                    '/api/generate_bow',      // 类比之弓
                    '/api/generate_hammer',   // 问题之锤
                    '/api/generate_ladder',   // 抽象之梯
                    '/api/generate_awl',      // 质疑之锥
                    '/api/generate_blade',    // 逻辑之刃
                    '/api/generate_mirror',   // 视觉之镜
                ];

                
                let currentIndex = 0; // 当前请求的索引
                const sentIndices = new Set();// 记录已经发送的请求索引

                // 发送请求的函数
                function sendRequest(index) {
                    if (index >= apiEndpoints.length || sentIndices.has(index)) {
                        return; // 如果index已经超出范围或已经发送过请求，则不再重复发送请求
                    }

                    sentIndices.add(index); // 标记该请求已发送，防止重复发送
                    const endpoint = apiEndpoints[index];
                    showLoading(weaponSvgs[index], index, apiEndpoints);

                    fetch(endpoint, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': `Bearer ${apiKey}`,
                        },
                        body: JSON.stringify({ 
                            prompt: userInput,
                            api_key: apiKey,
                            model: model,
                            api_endpoint: apiEndpoint
                        })
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`请求失败: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        showResult(weaponSvgs[index], data);
                        currentIndex++; // 当前请求完成，索引加1
                        if (currentIndex < apiEndpoints.length) {
                            sendRequest(currentIndex); // 发送下一个请求
                        }
                    })
                    .catch(error => {
                        showError(weaponSvgs[index], error.message);
                        console.error(`请求 ${endpoint} 出错:`, error);
                        currentIndex++; // 当前请求完成，索引加1
                        if (currentIndex < apiEndpoints.length) {
                            sendRequest(currentIndex); // 发送下一个请求
                        }
                    });
                }

                // 初始发送maxConcurrent个请求
                for (let i = 0; i < maxConcurrent && i < apiEndpoints.length; i++) {
                    sendRequest(i);
                }
            });
            
            // 回车键触发搜索
            searchInput.addEventListener('keypress', function(event) {
                if (event.key === 'Enter') {
                    searchButton.click();
                }
            });
        });
    </script>
</body>
</html> 


